<template>
    <div v-loading="loading">
        <el-form ref="form" :disabled="view" :model="form" :rules="rules" label-width="160px" label-suffix="：">
            <page-main title="基本信息">
                <el-row>
                    <el-col :md="20" :lg="12">
                        <el-form-item label="昵称" prop="nickname">
                            <el-input v-model="form.nickname" placeholder="请输入昵称" />
                        </el-form-item>
                        <el-form-item label="头像" prop="avatar_url">
                            <ImageUpload :url.sync="form.avatar_url" :width="80" :height="80" />
                        </el-form-item>
                        <el-form-item label="手机" prop="mobile">
                            <el-input v-model="form.mobile" placeholder="请填写手机号" />
                        </el-form-item>
                        <el-form-item label="E-mail" prop="email">
                            <el-input v-model="form.email" placeholder="" />
                        </el-form-item>
                        <el-form-item label="主播" prop="anchor">
                            <el-radio-group v-model="form.anchor">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="会员等级" prop="level_id">
                            <el-select v-model="form.level_id" style="width: 300px;" placeholder="请选择" clearable>
                                <el-option v-for="item in memberLevels" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态" prop="status">
                            <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </page-main>
            <page-main title="个人资料">
                <el-row>
                    <el-col :md="20" :lg="12">
                        <el-form-item label="姓名" prop="info.realname">
                            <el-input v-model="form.info.realname" placeholder="请输入姓名" />
                        </el-form-item>
                        <el-form-item label="性别" prop="info.gender">
                            <el-radio-group v-model="form.info.gender">
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="领域" prop="info.field_id">
                            <el-select v-model="form.info.field_id" style="width: 300px;" placeholder="请选择" clearable>
                                <el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="身份证号" prop="info.id_card">
                            <el-input v-model="form.info.id_card" placeholder="请输入姓名" />
                        </el-form-item>
                        <el-form-item label="身份证正面" prop="info.id_card_front_url">
                            <ImageUpload :url.sync="form.info.id_card_front_url" notip :width="170" :height="104" />
                        </el-form-item>
                        <el-form-item label="身份证反面" prop="info.id_card_back_url">
                            <ImageUpload :url.sync="form.info.id_card_back_url" notip :width="170" :height="104" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </page-main>
            <page-main title="直播资料">
                <el-row>
                    <el-col :md="20" :lg="12">
                        <el-form-item label="直播介绍" prop="live.introduction">
                            <el-input v-model="form.live.introduction" type="textarea" placeholder="请输入直播介绍" />
                        </el-form-item>
                        <el-form-item label="直播封面" prop="live.cover">
                            <ImageUpload :url.sync="form.live.cover" notip :width="80" :height="120" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </page-main>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            loading: false,
            memberLevels: [],
            fieldOptions: [],
            form: {
                id: this.id,
                nickname: '',
                mobile: '',
                avatar_url: '',
                email: '',
                level_id: '',
                anchor: 0,
                status: 1,
                info: {
                    realname: '',
                    gender: '',
                    field_id: '',
                    id_card: '',
                    id_card_front_url: '',
                    id_card_back_url: ''
                },
                live: {
                    introduction: '',
                    cover: ''
                }
            },
            rules: {
                nickname: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                name: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                email: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                mobile: [{ required: true, message: '请完善信息', trigger: 'blur' }]
            }
        }
    },
    mounted() {
        // 编辑
        if (this.form.id != '') {
            this.getInfo()
        }
        this.getMemberLevel()
        this.getFieldOptions()
    },
    methods: {
        getMemberLevel() {
            this.$api.post('frontUser/search/level-filter').then(res => {
                this.memberLevels = res.data.data
            })
        },
        getFieldOptions() {
            this.$api.post('frontUser/search/field-filter').then(res => {
                this.fieldOptions = res.data.data
            })
        },
        getInfo() {
            this.loading = true
            this.$api.post('frontUser/user/detail', { id: this.form.id }).then(res => {
                this.loading = false
                const data = res.data.data
                this.form = Object.assign(this.form, data)
            })
        },
        submit(callback) {
            if (this.form.id == '') {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$api.post('frontUser/user/create', this.form).then(() => {
                            this.$message.success({
                                message: '新增成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            } else {
                this.$refs['form'].validate(valid => { 
                    if (valid) {
                        this.$api.post('frontUser/user/update', this.form).then(() => {
                            this.$message.success({
                                message: '编辑成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    // scss
</style>
